import React,{ Component,PropTypes } from 'react';
import { Input,Button,DatePicker,Select,TimePicker,message,Popconfirm } from 'antd';
import styles from './WriteOnlyMeeting.css';
import moment from 'moment';
const Option = Select.Option;
const format = 'HH:mm';

export default class WriteOnlyMeeting extends Component {
  constructor(props) {
  	super(props);
  	this.state = {
      infor:{
        key: this.props.data.key,
        time: this.props.data.time,
        title: this.props.data.title,
        type: this.props.data.type || '部门例会',
        content: null
      },
      show:false
  	};
  	this.submit = this.submit.bind(this);
  }
  setRole(value) {
    const { infor } = this.state;
    infor.type = value;
  }
  setName(ev) {
    const { infor } = this.state;
    infor.title = ev.target.value;
  }
  setDate(date,dateString) {
    const { infor } = this.state;
    infor.time = dateString;
    this.setState({
      show:true
    })
  }
  setText(ev) {
    let text = ev.target.value;
    let text2 = text.replace(/\s/g,'<br>');
  	const { infor } = this.state;
    infor.content = text2;
  }
  setTime = (time,timeString) => {
    if (this.state.infor.time != null) {
      const { infor } = this.state;
      infor.time = this.state.infor.time + ' ' + timeString;
    }else{
      message.error('请先选择日期');
    }
  }
  //更新table
  submit() {
    let { infor } = this.state;
    let val = true;
    for ( let x in infor) {
      if (infor[x] == null) {
        message.error('填写的内容不能为空');
        val = false;
        break;
      }
    }

    if (val) {
      this.props.dispatch({
        type:'meeting/updateList',
        payload: infor
      });
      this.props.closePullScreen();
    }
  }
  render() {
  	return (
      <div className={styles.wrapper}>
        <div className={styles.div}>
          <span className={styles.span}>会议时间</span>
          <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} defaultValue={moment(this.state.infor.time, 'YYYY/MM/DD')} onChange={(date,dateString) => this.setDate(date,dateString)}/>
        </div>
        <div className={styles.div}>
          <span className={styles.span}>会议名称</span>
          <Input defaultValue={this.props.data.title} onBlur={(ev) => this.setName(ev)} className={styles.input}/>
        </div>
        <div className={styles.div}>
          <span className={styles.span}>会议分类</span>
          <Select onChange={(value) => this.setRole(value)} defaultValue={this.state.infor.type} style={{width:120}}>
            {
              OAglobal.meetingType.map(item => {
                return <Option key={item.key} value={item.value}>{item.value}</Option>;
              })
            }
          </Select>
        </div>
        <div className={styles.div}>
          <span className={styles.span}>会议内容</span>
          <Input className={styles.input} type="textarea" rows={8} 
          onBlur={(ev) => this.setText(ev)} placeholder="每条记录之间用回车换行"/>
        </div>
        <Button type="primary" onClick={this.submit}>
        保存
        </Button>
      </div>
  	)
  }
}
